<template>
  <div id="choise">
    <Button type="primary" @click="startChoise" style="margin-top: 100px">开始</Button>
    <h1>{{ result }}</h1>
  </div>
</template>

<script>
import {defaultItems, list} from '../util/itemService'

export default {
  name: 'choise-page',
  data () {
    return {
      result: '',
      items: [],
      item: {
        id: '',
        name: '',
        weight: ''
      }
    }
  },
  created () {
    let itemList = list()
    if (!itemList || JSON.stringify(itemList) === '[]') {
      this.items = defaultItems
    } else {
      this.items = itemList
    }
  },
  methods: {
    startChoise () {
      const items = []
      this.items.forEach(item => {
        for (let i = 0; i < item.weight; i++) {
          items.push(item)
        }
      })
      const choise = items[Math.random() * items.length | 0]
      this.result = choise.name
    },
    addItem () {

    },
    deleteItem () {

    }
  }
}
</script>

<style scoped>
#choise {
  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  /*color: #2c3e50;*/
  margin-top: 60px;
}
</style>
